<template>
  <div class="h-full w-full relative">

    <!-- svg container -->
    <SvgContainer>
      <template #default="{width,height}">
        <svg :width="width" :height="height">
          <!-- header-->
          <g stroke-width="2">
            <circle r="5" cx="25" cy="25" fill="none" stroke="#fff" />
            <path :d="`M27.5,27.5 L50,50 H200`" stroke="#fff" />
          </g>

          <!-- content -->
          <g stroke-width="2">
            <rect x="0" y="0" :width="width" :height="height" fill="none" stroke="#3e7ca6" stroke-width="5" />
            <rect x="10" y="10" :width="width-20" :height="height-20" fill="none" stroke="#3e7ca6" stroke-width="1" />

            <defs>
              <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="1000%">
                <stop offset="0%" stop-color="rgba(62,124,166,1)" />
                <stop offset="0%" stop-color="rgba(62,124,166,0.7)" />
              </linearGradient>

            </defs>
            <path :d="`M0,0 V${height*0.3} L${10},${height*0.28} V10 H${height*0.28} L${height*0.3},0 Z`" fill="url(#gradient)" stroke="none" />
            <path :d="`M${width},0 V${height*0.3} L${width-10},${height*0.28} V10 H${width-height*0.28} L${width-height*0.3},0 Z`" fill="url(#gradient)" stroke="none" />

            <path :d="`M0,${height} V${height*0.7} L${10},${height*0.68} V${height-10} H${height*0.3} L${height*0.28},${height} Z`" fill="url(#gradient)" />
            <path :d="`M${width},${height} V${height*0.7} L${width-10},${height*0.72} V${height-10} H${width-height*0.28} L${width-height*0.3},${height} Z`" fill="url(#gradient)" />

          </g>
        </svg>
      </template>
    </SvgContainer>

    <!-- content container -->
    <div class="h-full w-full relative">
      <slot></slot>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import SvgContainer from '@/components/Common/SvgContainer/index.vue'

const headerHeight = ref(50)
</script>
